<template>
	<view class="page index">
		<view class="header">
			<nav-bar title="积分查询">
			</nav-bar>
		</view>
		<view class="main">
			<view class="scroll">
				<scroll-view class="scrollX" :scroll-x="true">
					<!-- countIndex===item.id?'scrollItem':'scrollItemBefore' -->
					<view :class="countIndex===item.id?'scrollItem scrollItemBefore1':'scrollItem scrollItemBefore2'"
						v-for="item in scrollList" :key="item.id" @click="clickIndex(item.id)">
						<text :class="countIndex===item.id?'scroll-item2':'scroll-item'">{{item.title}}</text>
						<uni-icons v-if="item.title.length > 2" type="bottom"></uni-icons>
					</view>
				</scroll-view>
			</view>
			<view class="detailed">
				<view class="anition">
					<template v-if="countIndex==0">
						<IntegralComponent :dateList="item" v-for="(item,index) in dateList" :key="index" />
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import IntegralComponent from "./integralComponent/integralComponent.vue";
	export default {
		components: {
			IntegralComponent,
		},
		data() {
			return {
				scrollList: [{
						id: 0,
						title: '全部'
					},
					{
						id: 1,
						title: '获得'
					},
					{
						id: 2,
						title: '消耗'
					},
					{
						id: 3,
						title: '活动类型'
					},
					{
						id: 4,
						title: '筛选时间'
					},
				],
				dateList: [{
						id: 0,
						dateTitle: '2022年11月',
						acquire: 7,
						consume: 1,
						chriderList: [{
								moveAbout: '活动加分',
								divide: true,
								integral: 1,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
							{
								moveAbout: '活动加分',
								divide: true,
								integral: 1,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
							{
								moveAbout: '活动加分',
								divide: true,
								integral: 5,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
							{
								moveAbout: '活动扣分',
								divide: false,
								integral: 2,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
						]
					},
					{
						id: 1,
						dateTitle: '2022年11月',
						acquire: 7,
						consume: 1,
						chriderList: [{
								moveAbout: '活动加分',
								divide: true,
								integral: 1,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
							{
								moveAbout: '活动加分',
								divide: true,
								integral: 1,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
							{
								moveAbout: '活动加分',
								divide: true,
								integral: 5,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
							{
								moveAbout: '活动扣分',
								divide: false,
								integral: 2,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
						]
					},
					{
						id: 2,
						dateTitle: '2022年11月',
						acquire: 7,
						consume: 1,
						chriderList: [{
								moveAbout: '活动加分',
								divide: true,
								integral: 1,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
							{
								moveAbout: '活动加分',
								divide: true,
								integral: 1,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
							{
								moveAbout: '活动加分',
								divide: true,
								integral: 5,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
							{
								moveAbout: '活动扣分',
								divide: false,
								integral: 2,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
						]
					},
					{
						id: 3,
						dateTitle: '2022年11月',
						acquire: 7,
						consume: 1,
						chriderList: [{
								moveAbout: '活动加分',
								divide: true,
								integral: 1,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
							{
								moveAbout: '活动加分',
								divide: true,
								integral: 1,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
							{
								moveAbout: '活动加分',
								divide: true,
								integral: 5,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
							{
								moveAbout: '活动扣分',
								divide: false,
								integral: 2,
								content: '参加XXXX活动',
								date: '2022-11-01 12:12'
							},
						]
					}
				],
				countIndex: 0,
			}
		},
		created() {

		},
		methods: {
			clickIndex(idx) {
				this.countIndex = idx
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/common.scss";
	@import 'index.scss';

	// /deep/ .uni-scroll-view::-webkit-scrollbar {
	// 	display: none;
	// }
</style>